<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-form ref="form" :model="form" size="small" label-width="56px">
          <el-form-item label="状态：">
            <el-radio-group v-model="status">
              <el-radio :label="null">全部</el-radio>
              <el-radio label="0">草稿</el-radio>
              <el-radio label="1">待审核</el-radio>
              <el-radio label="2">审核通过</el-radio>
              <el-radio label="3">审核失败</el-radio>
              <el-radio label="4">已删除</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="频道：">
            <el-select v-model="channelIs" placeholder="请选择频道">
              <el-option label="全部" :value="null"></el-option>
              <el-option :label="channel.name" :value="channel.id" v-for="(channel,index) in channels" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker v-model="form.date1" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loadArticles_s()">筛 选</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>根据筛选条件共查询到{{totalCant}}条结果</span>
      </div>
      <div>
        <el-table :data="tableData" stripe style="width: 100%" border>
          <el-table-column prop="" label="封面" width="180">
            <template slot-scope="scope">
              <img v-if="scope.row.cover.images[0]" class="act_img" :src="scope.row.cover.images[0]" alt="">
              <!-- 判断无数据，显示本地静态图片 -->
              <img v-else class="act_img" src="./timg.jpg" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="title" label="标题" width="180">
          </el-table-column>
          <el-table-column prop="" label="状态">
            <template slot-scope="scope">
              <el-tag :type="tableDataStatus[scope.row.status].type">{{tableDataStatus[scope.row.status].text}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="pubdate" label="发布时间">
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination background layout="prev, pager, next" :total="totalCant" :page-size="pageSize"
        @current-change="onCurrentChange">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getArticles_s, getArticleChannels } from '@/api/article'
export default {
  name: 'ArticleIndex',
  data() {
    return {
      form: {
        region: '', //
        date1: '', //
        resource: '', //
      },
      totalCant: 0,
      pageSize: 10,
      status: null,
      tableData: [],
      tableDataStatus: [
        { status: 0, text: '草稿', type: 'info' },
        { status: 1, text: '待审核', type: '' },
        { status: 2, text: '审核通过', type: 'success' },
        { status: 3, text: '审核失败', type: 'warning' },
        { status: 4, text: '已删除', type: 'danger' },
      ],
      channels: [],
      channelIs: null,
    }
  },
  created() {
    this.loadArticles_s(1)
    this.loadChannels()
  },
  methods: {
    loadArticles_s(page = 1) {
      getArticles_s({
        page,
        per_page: this.pageSize,
        status: this.status,
        channel_id: this.channelIs,
      }).then((res) => {
        const { results, total_count: totalCount } = res.data.data
        this.tableData = results
        this.totalCant = totalCount //检查会报错
      })
    },
    loadChannels() {
      getArticleChannels().then((res) => {
        // console.log(res.data.data.channels)
        this.channels = res.data.data.channels
      })
    },
    handleEdit() {},
    handleDelete() {},
    onSubmit() {
      console.log('submit!')
    },
    onCurrentChange(page) {
      this.loadArticles_s(page)
    },
  },
}
</script>

<style lang lang="less">
.act_img {
  width: 100px;
  background-size: cover;
}
</style>